<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 完成一个动画效果:
 一个宽高为100px*100px 的矩形方块,在一个宽1000px,高500px的区域(居中效果)内以其左上角为起点,
 在区域内以'>'路线进行移动,交替播放,无限循环。 -->
    <style>
        .backgroundboard{
            /* 基础框架 */
            width: 1000px;
            height: 500px;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            border: 10px black;
            overflow: hidden; 
            background-image: url('melo.jpg');
            /* 注意图片路径命名方式 */
            background-size: contain;
        }
        .desire{
            /* 基础框架 */
            width: 100px;
            height: 100px;
            background-image: url('my lover.jpg');
            background-size: contain;
            animation-name: backandforth;
            animation-duration: 4s;
            /* 动画执行次数:无数次 */
            animation-iteration-count:infinite;
            /* 延迟时间 */
            animation-delay: 0.8s;
            /* 动画执行的方向:from到to，再to到from */
            animation-direction:alternate; 
            /* 动画的填充模式：延时等待时，处于开始位置 */
            animation-fill-mode:backwards;
            /* 动画的执行状态:鼠标逮到，即暂停 使用不成功 需继续调试 */
            /* animation-play-state:paused; */
        } 
        @keyframes backandforth{
            from{
                margin-left: 0px;  
            }
            50%{
                margin-left: 900px;
                margin-top: 200px;
            }
            to{
                margin-left: 0px;
                margin-top: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="backgroundboard">
        <div class="desire"></div>     
    </div>
</body>
</html>